<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>产品详情</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
		<link rel="stylesheet" href="lib/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body ontouchstart>
		<!--主体-->
		<div class="weui-content">
			<!--产品详情-->
			<div class="weui-tab">
				<div class="weui-navbar" style="position:fixed; top:0; left:0; right:0; height:44px;">
					<a class="weui-navbar__item proinfo-tab-tit weui-bar__item--on" href="#tab1">商品</a>
					<a class="weui-navbar__item proinfo-tab-tit" href="#tab2">详情</a>
					<a class="weui-navbar__item proinfo-tab-tit" href="#tab3">评价</a>
				</div>
				<div class="weui-tab__bd proinfo-tab-con">
					<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
						<!--主图轮播-->
						<div class="swiper-container swiper-zhutu">
							<div class="swiper-wrapper" id="wheelPlantPic">
								
							</div>
							<div class="swiper-pagination swiper-zhutu-pagination"></div>
						</div>
						<div class="wy-media-box-nomg weui-media-box_text">
							<h4 class="wy-media-box__title" id="product_title"></h4>
							<div class="wy-pro-pri mg-tb-5">¥<em class="num font-20" id="product_price"></em></div>
							
						</div>
						<div class="wy-media-box2 weui-media-box_text">
							<div class="weui-media-box_appmsg" id="product_coupon">
							</div>
						</div>
						<div class="wy-media-box2 weui-media-box_text" id="guige_html">
							
						</div>
						<div class="wy-media-box2 txtpd weui-media-box_text">
							<div class="weui-media-box_appmsg">
								<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">运费</span></div>
								<div class="weui-media-box__bd">
									<div class="promotion-message clear">
										<span class="promotion-item-text">免运费
											<!--<div class="wy-pro-pri">¥<span class="num">11.00</span></div>--></span>
									</div>
								</div>
							</div>
							<div class="weui-media-box_appmsg">
								<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">商家</span></div>
								<div class="weui-media-box__bd">
									<div class="promotion-message clear">
										<span class="promotion-item-text">依然美</span>
									</div>
								</div>
							</div>
							<div class="weui-media-box_appmsg">
								<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">提示</span></div>
								<div class="weui-media-box__bd">
									<div class="promotion-message clear">
										<span class="promotion-item-text">
											<p class="txt-color-ml">支持7天无理由退换货</p>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--详情-->
					<div id="tab2" class="weui-tab__bd-item ">
						<div class="pro-detail" id="product_detail">
							
						</div>
					</div>
					<!--评价-->
					<div id="tab3" class="weui-tab__bd-item" >
							<div id="product_comment"></div>
					</div>
				</div>
			</div>
		</div>
		<span id="tophovertree" title="返回顶部"></span>
		<!--底部导航-->
		<div class="foot-black"></div>
		<div class="weui-tabbar wy-foot-menu">
			<a href="index.html" class="weui-tabbar__item weui-bar__item--on">
				<div class="weui-tabbar__icon foot-menu-home"></div>
				<p class="weui-tabbar__label">首页</p>
			</a>
			<!-- <a href="javascript:;" id='show-toast' class="promotion-foot-menu-items">
				<div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
				<p class="weui-tabbar__label">收藏</p>
			</a> -->
			<a href="shopcart.html" class="promotion-foot-menu-items">
				<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;"><span id="car_product_number"></span></span>
				<div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
				<p class="weui-tabbar__label">购物车</p>
			</a>
			<a href="javascript:addShopCat();" class="weui-tabbar__item yellow-color open-popup" data-target="#join_cart">
				<p class="promotion-foot-menu-label">加入购物车</p>
			</a>
			<a href="javascript:buyNow();" class="weui-tabbar__item red-color open-popup" >
				<p class="promotion-foot-menu-label">立即购买</p>
			</a>
		</div>
		<div id="join_cart" class='weui-popup__container popup-bottom' style="z-index:600;">
			<div class="weui-popup__overlay" style="opacity:1;"></div>
			<div class="weui-popup__modal">
				<div class="modal-content">
					<div class="weui-msg" style="padding-top:0;">
						<div class="weui-msg__icon-area"><i id="shop_car_icon" class="weui-icon-success weui-icon_msg"></i></div>
						<div class="weui-msg__text-area">
							<h2 class="weui-msg__title" id="shop_car_success">成功加入购物车</h2>
							<p class="weui-msg__desc" id="shop_car_msg">亲爱的用户，您的商品已成功加入购物车，为了保证您的商品快速送达，请您尽快到购物车结算。</p>
						</div>
						<div class="weui-msg__opr-area">
							<p class="weui-btn-area">
								<a href="shopcart.html" class="weui-btn weui-btn_primary" id="shop_car_primary">去购物车结算</a>
								<a href="javascript:;" class="weui-btn weui-btn_default close-popup">不，我再看看</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<input type="hidden" id="guige_data1" />
		<input type="hidden" id="guige_data2" />
		<script src="lib/jquery-2.1.4.js"></script>
		<script type="text/javascript" src="js/config.js"></script>
		<script>
			$(function() {
				FastClick.attach(document.body);
				});
		</script>
		
		<script>
			var productId = sessionStorage.productId;
			var openId = sessionStorage.openId;
			var product_data;
			$(function() {
				//主图轮播
				$.ajax({
					type: "post",
					url: base_url+"/api/yiran/weChatMall/product/queryWheelPlantPic/"+productId,
					async: false, //同步
					success: function (data) {
						var wheelPlantPic = data.data;
						var wheelPlantPicHtml = "";
						if(data.code == '200'){
							for(var i = 0; i < wheelPlantPic.length; i++){
								wheelPlantPicHtml += "<div class='swiper-slide'><img src='"+wheelPlantPic[i].imageUrl+"' /></div>";
							}
						}
						$("#wheelPlantPic").html(wheelPlantPicHtml);
					},
					//调用出错执行的函数
					error: function(){
						$("#wheelPlantPic").html("请求服务器api失败，无法获取数据");
					}
				});
				
				//产品信息
				$.ajax({
					type: "post",
					url: base_url+"/api/yiran/weChatMall/product/queryProduct/"+productId,
					async: false, //同步
					success: function (data) {
						product_data = data.data;
						console.info(product_data)
						var product = product_data.product;
						var productDes = product_data.productDes;
						var productCommen = product_data.productComment;
						var productCoupons = product_data.productCouponList;
						var productTitleHtml ="";
						var productPriceHtml = "";
						var guigeHtml = "";
						var productDetailHtml="";
						var productCommentHtml ="";
						var productCouponHtml = "";
						if(data.code == '200'){
							//标题
							productTitleHtml = product.title;
							$("#product_title").html(productTitleHtml);
							//价格
							productPriceHtml = product.p4; 
							$("#product_price").html(productPriceHtml);
							//优惠券
							productCouponHtml +="<div class='weui-media-box__hd proinfo-txt-l'><span class='promotion-label-tit'>优惠</span></div><div class='weui-media-box__bd'>";
							for(var i=0;i<productCoupons.length;i++){
								productCouponHtml +="<div class='promotion-message clear'><i class='yhq'><span class='label-text'>优惠券</span></i><span class='promotion-item-text'>"+productCoupons[i].conditionDesc+"</span></div>";
							}
								productCouponHtml += "<div class='yhq-btn clear'><a href='getcoupons.html'>去领券</a></div></div>";
								
							$("#product_coupon").html(productCouponHtml);
							
							//规格
							var guige = product_data.productSpecification;
							var guigeHtml = "";
							for(var i=0;i<guige.length;i++){
								guigeHtml += "<div class='weui-media-box_appmsg'><div class='weui-media-box__hd proinfo-txt-l'><span class='promotion-label-tit'>"+guige[i][0]+"</span></div><div class='weui-media-box__bd'><div class=promotion-sku clear><ul>";
								var str = guige[i][1].substring(0,guige[i][1].length-1);
								var strs=str.split(","); //字符分割 
								for (j=0;j<strs.length ;j++ ) 
								{ 
									guigeHtml +="<li><a href='javascript:selectGuige(\""+strs[j]+"_"+guige[i][0]+"\");'>"+strs[j]+"</a></li>";
								} 
								guigeHtml +="</ul></div></div></div>";
							}
							$("#guige_html").html(guigeHtml);		
							$("#guige_attr").html(guigeHtml);
							
							//详情
							productDetailHtml += productDes.content;
							$("#product_detail").html(productDetailHtml);
							
							//评价
							for(var i=0;i<productCommen.length;i++){
								productCommentHtml +="<div class='weui-panel__bd'><div class='wy-media-box weui-media-box_text'><div class='weui-cell nopd weui-cell_access'><div class='weui-cell__hd'><img src='upload/headimg.jpg' alt='' style='width:20px;margin-right:5px;display:block'></div><div class='weui-cell__bd weui-cell_primary'><p>"+productCommen[i].userNick+"</p></div><span class='weui-cell__time'>"+productCommen[i].createTime+"</span></div><div class='comment-item-star'><span class='real-star comment-stars-width"+productCommen[i].commentaryScore+"'></span></div><p class='weui-media-box__desc'>"+productCommen[i].comment+"</p><ul class='weui-uploader__files clear mg-com-img'><li class='weui-uploader__file' style='background-image:url("+productCommen[i].imagePath+")'></li></ul></div></div>"
							}
							productCommentHtml +="<a href='javascript:void(0);' class='weui-cell weui-cell_access weui-cell_link list-more'><div class='weui-cell__bd'>查看更多</div><span class='weui-cell__ft'></span></a>";
							$("#product_comment").html(productCommentHtml);
							
							
						}
						
					},
					//调用出错执行的函数
					error: function(){
						$("#wheelPlantPic").html("请求服务器api失败，无法获取数据");
					}
				});
				
				//购物车数量
				$.ajax({
					type: "post",
					url: base_url+"/api/yiran/weChatMall/queryCarProduct/"+openId,
					async: false, //同步
					success: function (data) {
						var cardata = data.data;
						var carHtml = "";
						if(data.code == '200'){
							if(cardata.length > 0){
								carHtml = cardata.length;
							}
						}
						$("#car_product_number").html(carHtml);
					},
					//调用出错执行的函数
					error: function(){
						//请求出错处理
					}
				});
				
				$(".swiper-zhutu").swiper({
					loop: true,
					paginationType: 'fraction',
					autoplay: 5000
				});
				$(".promotion-sku li").click(function() {
					$(this).addClass("active").siblings("li").removeClass("active");
				});
			})
			//加入购物车
			function addShopCat(){
				var guige_data1 = $("#guige_data1").val();
				var guige_data2 = $("#guige_data2").val();
				console.info("加入购物车:"+guige_data1)
				console.info("加入购物车:"+guige_data2)
				if(guige_data1=="" || guige_data2==""){
					$("#shop_car_icon").removeClass("weui-icon-success weui-icon_msg");
					$("#shop_car_icon").toggleClass("weui-icon-warn weui-icon_msg",true);
					$("#shop_car_msg").html("商品规格不能为空，请重新选择!");
					$("#shop_car_success").hide();
					$("#shop_car_primary").hide();
				}else{
						$("#shop_car_icon").removeClass("weui-icon-warn weui-icon_msg");
						$("#shop_car_icon").toggleClass("weui-icon-success weui-icon_msg",true);
						$("#shop_car_msg").html("亲爱的用户，您的商品已成功加入购物车，为了保证您的商品快速送达，请您尽快到购物车结算。");
						$("#shop_car_success").show();
						$("#shop_car_primary").show();
						var temp1= guige_data1.split("_");
						var temp2= guige_data2.split("_");
						var specification = temp1[1]+":"+temp1[0]+","+temp2[1]+":"+temp2[0];
						console.info("规格参数:"+specification)
						var price = $("#product_price").html();
						//保存到购物车
						$.ajax({
							type: "post",
							url: base_url+"/api/yiran/weChatMall/product/saveShopCat/"+productId+"/"+encodeURI(encodeURI(specification))+"/"+price+"/"+sessionStorage.openId,
							async: false, //同步
							contentType:'application/x-www-form-urlencoded; charset=UTF-8',
							success: function (data) {
								if(data.code == '200'){
									
								}
							},
							//调用出错执行的函数
							error: function(){
								//请求出错处理
							}
						});
						
				}
					
			}
			//获取规格
			function selectGuige(data){
				//获取规格名称
				var temp = data.split("_");
				var temp_name = temp[1];
				console.info("获取规格名称:"+temp[0]);
				var guige_data1 = $("#guige_data1").val();
				var guige_data2 = $("#guige_data2").val();
				if(guige_data1==""){
					$("#guige_data1").val(data);
				}else{
					var temp1 = guige_data1.split("_");
					if(temp1[1] == temp_name){
						$("#guige_data1").val(data);
					}else{
						if(guige_data2==""){
							$("#guige_data2").val(data);
						}else{
							var temp2 = guige_data2.split("_");
							if(temp2[1] == temp_name){
								$("#guige_data2").val(data);
							}
						}
						
					}
				}
				 
				//获取不同的价格
				var guige1 = $("#guige_data1").val();
				var guige2 = $("#guige_data2").val();
				
				var specification = guige1.split("_")[0]+"_"+guige2.split("_")[0];
				if(guige1!="" && guige2!=""){
					$.ajax({
						type: "post",
						url: base_url+"/api/yiran/weChatMall/product/queryPicBySpecification/"+productId+"/"+encodeURI(encodeURI(specification)),
						async: false, //同步
						contentType:'application/x-www-form-urlencoded; charset=UTF-8',
						success: function (data) {
							if(data.code == '200'){
								if(data!=null){
									$("#product_price").html(data.data.price)
								}
							}
						},
						//调用出错执行的函数
						error: function(){
							//请求出错处理
						}
					});
				}
				 
			}
			
			var ProductCat = function ProductCat(productId,totalPrice,totalNum,title,attr,pictureUrl) {
				this.productId = productId;
				this.totalPrice = totalPrice;
				this.totalNum = totalNum;
				this.title = title;
				this.attr = attr;
				this.pictureUrl = pictureUrl;
			}
			
			function buyNow(){
				var guige_data1 = $("#guige_data1").val();
				var guige_data2 = $("#guige_data2").val();
				var specification ;
				if(guige_data1=="" || guige_data2=="" || guige_data1 == undefined || guige_data2 == undefined){
					$("#shop_car_icon").removeClass("weui-icon-success weui-icon_msg");
					$("#shop_car_icon").toggleClass("weui-icon-warn weui-icon_msg",true);
					$("#shop_car_msg").html("商品规格不能为空，请重新选择!");
					$("#shop_car_success").hide();
					$("#shop_car_primary").hide();
				}else{
						$("#shop_car_success").show();
						$("#shop_car_primary").show();
						var temp1= guige_data1.split("_");
						var temp2= guige_data2.split("_");
						specification = temp1[1]+":"+temp1[0]+","+temp2[1]+":"+temp2[0];
						console.info("规格参数:"+specification)
						var price = $("#product_price").html();
						//保存到购物车
						$.ajax({
							type: "post",
							url: base_url+"/api/yiran/weChatMall/product/saveShopCat/"+productId+"/"+encodeURI(encodeURI(specification))+"/"+price+"/"+sessionStorage.openId,
							async: false, //同步
							contentType:'application/x-www-form-urlencoded; charset=UTF-8',
							success: function (data) {
								if(data.code == '200'){
									
								}
							},
							//调用出错执行的函数
							error: function(){
								//请求出错处理
							}
						});
						
				}
				
				var product = new ProductCat(product_data.product.productId,product_data.product.p4,1,product_data.product.title,specification,product_data.product.pictureUrl);
				console.info("立即购买参数:"+JSON.stringify(product))
				sessionStorage.setItem("product",JSON.stringify(product));
				window.location.href="order_info.html";
			}
			
		</script>
		<script>
			$(document).on("click", "#show-toast", function() {
				$.toast("收藏成功", function() {
					console.log('close');
				});
			})
		</script>
		<script>
			$(document).on("open", ".weui-popup-modal", function() {
				console.log("open popup");
			}).on("close", ".weui-popup-modal", function() {
				console.log("close popup");
			});
		</script>
		<script>
			$(function() {
				initTopHoverTree("tophov" + "ertree", 30, 10, 10);
			})
		</script>
		<script>
			function initTopHoverTree(hvtid, times, right, bottom) {
				$("#" + hvtid).css("right", right).css("bottmo", bottom);
				$("#" + hvtid).on("click", function() {
					goTopHovetree(times);
				})
				$(window).scroll(function() {
					if ($(window).scrollTop() > 268) {
						$("#" + hvtid).fadeIn(100);
					} else {
						$("#" + hvtid).fadeOut(100);
					}
				});
			}
			//返回顶部动画
			//goTop(500);//500ms内滚回顶部
			function goTopHovetree(times) {
				if (!!!times) {
					$(window).scrollTop(0);
					return;
				}
				var sh = $('body').scrollTop(); //移动总距离
				var inter = 13.333; //ms,每次移动间隔时间
				var forCount = Math.ceil(times / inter); //移动次数
				var stepL = Math.ceil(sh / forCount); //移动步长
				var timeId = null;

				function aniHovertree() {
					!!timeId && clearTimeout(timeId);
					timeId = null;
					//console.log($('body').scrollTop());
					if ($('body').scrollTop() <= 0 || forCount <= 0) { //移动端判断次数好些，因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况
						$('body').scrollTop(0);
						return;
					}
					forCount--;
					sh -= stepL;
					$('body').scrollTop(sh);
					timeId = setTimeout(function() {
						aniHovertree();
					}, inter);
				}
				aniHovertree();
			}
			
		</script>
	</body>
</html>

<script src="lib/fastclick.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swiper.js"></script>